<template>
  <view class="container">
    <view class="title">RunningHub API示例</view>
    
    <view class="section">
      <view class="section-title">设置API Key</view>
      <view class="form">
        <input v-model="apikey" type="text" placeholder="请输入API Key" />
        <button type="primary" @click="handleSetApiKey">设置</button>
      </view>
    </view>
    
    <view class="section">
      <view class="section-title">账户信息</view>
      <button type="primary" @click="handleGetAccountInfo">获取账户信息</button>
    </view>
    
    <view class="section">
      <view class="section-title">任务管理</view>
      <view class="form">
        <input v-model="taskId" type="text" placeholder="请输入任务ID" />
        <view class="btn-group">
          <button type="primary" @click="handleQueryTaskStatus">查询任务状态</button>
          <button type="primary" @click="handleQueryTaskResult">查询任务结果</button>
          <button type="default" @click="handleCancelTask">取消任务</button>
        </view>
      </view>
    </view>
    
    <view class="section">
      <view class="section-title">Webhook管理</view>
      <view class="form">
        <input v-model="webhookTaskId" type="text" placeholder="请输入任务ID" />
        <button type="primary" @click="handleGetWebhookDetail">获取Webhook详情</button>
      </view>
      <view class="form" v-if="webhookEventId">
        <text class="event-id">事件ID: {{ webhookEventId }}</text>
        <button type="primary" @click="handleResendWebhook">重新发送Webhook</button>
      </view>
    </view>
    
    <view class="section">
      <view class="section-title">创建任务</view>
      <button type="primary" @click="handleCreateSimpleTask">创建简易任务</button>
      <button type="primary" @click="handleCreateWebhookTask">创建Webhook任务</button>
    </view>
    
    <view class="section">
      <view class="section-title">上传资源</view>
      <button type="primary" @click="handleChooseAndUploadFile">选择并上传文件</button>
      <button type="primary" @click="handleGetLoraUploadUrl">获取Lora上传链接</button>
    </view>
    
    <view class="section">
      <view class="section-title">结果展示</view>
      <scroll-view scroll-y class="result-box">
        <text>{{ resultText }}</text>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import runningHubService from '@/utils/runningHubService';

export default {
  data() {
    return {
      apikey: '4067f5cbd5da40359602adaa342ab82c',
      taskId: '',
      webhookTaskId: '',
      webhookEventId: '',
      resultText: ''
    };
  },
  
  onLoad() {
    // 设置默认API Key
    this.apikey = this.apikey || uni.getStorageSync('runningHubApiKey') || '';
    if (this.apikey) {
      runningHubService.setApiKey(this.apikey);
      this.resultText = '已预设API Key: ' + this.apikey;
    }
  },
  
  methods: {
    // 设置API Key
    handleSetApiKey() {
      if (!this.apikey) {
        uni.showToast({
          title: '请输入API Key',
          icon: 'none'
        });
        return;
      }
      
      runningHubService.setApiKey(this.apikey);
      uni.showToast({
        title: 'API Key设置成功',
        icon: 'success'
      });
    },
    
    // 获取账户信息
    async handleGetAccountInfo() {
      try {
        this.showLoading('加载中...');
        const res = await runningHubService.getAccountInfo();
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '获取账户信息失败';
      }
    },
    
    // 查询任务状态
    async handleQueryTaskStatus() {
      if (!this.taskId) {
        uni.showToast({
          title: '请输入任务ID',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.showLoading('查询中...');
        const res = await runningHubService.queryTaskStatus(this.taskId);
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '查询任务状态失败';
      }
    },
    
    // 查询任务结果
    async handleQueryTaskResult() {
      if (!this.taskId) {
        uni.showToast({
          title: '请输入任务ID',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.showLoading('查询中...');
        const res = await runningHubService.queryTaskResult(this.taskId);
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '查询任务结果失败';
      }
    },
    
    // 取消任务
    async handleCancelTask() {
      if (!this.taskId) {
        uni.showToast({
          title: '请输入任务ID',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.showLoading('取消中...');
        const res = await runningHubService.cancelTask(this.taskId);
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '取消任务失败';
      }
    },
    
    // 获取Webhook详情
    async handleGetWebhookDetail() {
      if (!this.webhookTaskId) {
        uni.showToast({
          title: '请输入任务ID',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.showLoading('查询中...');
        const res = await runningHubService.getWebhookDetail(this.webhookTaskId);
        this.hideLoading();
        
        if (res.code === 0 && res.data && res.data.id) {
          this.webhookEventId = res.data.id;
        }
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '获取Webhook详情失败';
      }
    },
    
    // 重新发送Webhook
    async handleResendWebhook() {
      if (!this.webhookEventId) {
        uni.showToast({
          title: '请先获取Webhook详情',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.showLoading('发送中...');
        const res = await runningHubService.resendWebhook(this.webhookEventId);
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '重新发送Webhook失败';
      }
    },
    
    // 创建简易任务
    async handleCreateSimpleTask() {
      try {
        this.showLoading('创建中...');
        
        // 这里是一个简单的示例，实际使用时需要根据文档提供正确的参数
        const params = {
          workflowApiId: '1', // 工作流ID，需要替换为实际值
          prompt: '一只可爱的猫咪',
          negativePrompt: '低质量, 模糊'
        };
        
        const res = await runningHubService.createTask(params);
        this.hideLoading();
        
        if (res.code === 0 && res.data) {
          this.taskId = res.data.taskId || '';
        }
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '创建任务失败';
      }
    },
    
    // 创建Webhook任务
    async handleCreateWebhookTask() {
      try {
        this.showLoading('创建中...');
        
        // 这里是一个简单的示例，实际使用时需要根据文档提供正确的参数
        const params = {
          workflowApiId: '1', // 工作流ID，需要替换为实际值
          prompt: '一只可爱的猫咪',
          negativePrompt: '低质量, 模糊',
          webhookUrl: 'https://your-webhook-url.com/callback' // 回调URL，需要替换为实际值
        };
        
        const res = await runningHubService.createTaskWebhook(params);
        this.hideLoading();
        
        if (res.code === 0 && res.data) {
          this.taskId = res.data.taskId || '';
          this.webhookTaskId = this.taskId;
        }
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '创建Webhook任务失败';
      }
    },
    
    // 选择并上传文件
    handleChooseAndUploadFile() {
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.uploadFile(tempFilePaths[0]);
        }
      });
    },
    
    // 上传文件
    async uploadFile(filePath) {
      try {
        this.showLoading('上传中...');
        
        const res = await runningHubService.uploadResourceFile(filePath);
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '上传文件失败';
      }
    },
    
    // 获取Lora上传链接
    async handleGetLoraUploadUrl() {
      try {
        this.showLoading('获取中...');
        
        // 这里是一个简单的示例，实际使用时需要根据文档提供正确的参数
        const params = {
          fileName: 'example.safetensors'
        };
        
        const res = await runningHubService.getLoraUploadUrl(params);
        this.hideLoading();
        
        this.resultText = JSON.stringify(res, null, 2);
      } catch (error) {
        this.hideLoading();
        this.resultText = error.message || '获取Lora上传链接失败';
      }
    },
    
    // 显示加载提示
    showLoading(title = '加载中') {
      uni.showLoading({
        title,
        mask: true
      });
    },
    
    // 隐藏加载提示
    hideLoading() {
      uni.hideLoading();
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .section {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #eee;
      padding-bottom: 10rpx;
    }
    
    .form {
      display: flex;
      flex-direction: column;
      margin-bottom: 20rpx;
      
      input {
        height: 80rpx;
        border: 1px solid #eee;
        border-radius: 8rpx;
        padding: 0 20rpx;
        margin-bottom: 20rpx;
      }
      
      .event-id {
        margin-bottom: 20rpx;
        color: #333;
        font-size: 28rpx;
      }
    }
    
    .btn-group {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
    }
    
    button {
      margin-bottom: 20rpx;
    }
    
    .result-box {
      height: 300rpx;
      border: 1px solid #eee;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 24rpx;
      color: #333;
      word-break: break-all;
      line-height: 1.5;
      background-color: #f9f9f9;
    }
  }
}
</style> 